<template>

  <!-- 新增组件 ｜ 编辑组件 -->
  <a-layout style="background: #fff;">
    <a-layout-content style="padding-top: 20px;" v-if="handle == 'add' || handle == 'edit' ">
      <a-row>
        <a-col :span=" 20" :offset="1">
          <a-form :model="addData" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }" autocomplete="off"
            labelAlign='left'>


            <a-form-item label="组件名:" name="compontName" :rules="[{ required: true, message: '组件名不能为空值!' }]">
              <a-input v-model:value="addData.compontName" />
            </a-form-item>

            <a-form-item label="Tag" name="tag" :rules="[{ required: true, message: 'Tag不能为空值!' }]">
              <a-input v-model:value="addData.tag" />
            </a-form-item>

            <a-form-item label="备注:" name="remark">
              <a-textarea v-model:value="addData.remark" />
            </a-form-item>

          </a-form>
        </a-col>
      </a-row>
    </a-layout-content>


    <a-layout-content v-if="handle == 'config' " >
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" tab="属性">Content of Tab Pane 1</a-tab-pane>
        <a-tab-pane key="2" tab="属性2">Content of Tab Pane 2</a-tab-pane>
        <a-tab-pane key="3" tab="属性3">Content of Tab Pane 3</a-tab-pane>
      </a-tabs>
    </a-layout-content>

  </a-layout>

</template>

<script setup lang="ts">
import { computed , PropType ,ref, reactive, toRaw  ,withDefaults , watch, watchEffect} from 'vue'
import ML_Component from "./components_class/index"

// interface PropsType {
//   handle: string,
//   data : ML_Component,
// }
// let props = withDefaults( defineProps<PropsType>(),{
//   data: ML_Component,
// })
let props = defineProps({
  handle: {
		type: String,
		required: true,
    default: "",
	},
	data: {
		type: Object as PropType< ML_Component >
	}
})



let props_data = toRaw(props.data)

// 组件 新增 | 编辑 需要的数据
let addData = reactive({
  _id: props_data ? props_data._id : "",
  compontName: props_data ? props_data.compontName : "",
  tag: props_data ? props_data.tag : "",
  remark: props_data ? props_data.remark : "",
})


// 配置
let activeKey = ref("1")

interface AttrType { key: string, val: string}


let configData = reactive<{ key: string , attrArr : AttrType[]}[]>([
  { key: 'attr' ,attrArr: []},
])

const attr_item = { key: "", val: "" }





defineExpose({
  addData
})


</script>
